<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
                    <#list columns as column>
                        <el-form-item label="${column.column_comment}">
                            <el-input v-model="params.entity.${column.camel_case_column_name}"
                                      placeholder="请输入${column.column_comment}"/>
                        </el-form-item>
                    </#list>
                    <el-form-item>
                        <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
                        <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <el-table v-loading="loading"
                  :data="tableData.list" style="width: 100%" height="500"
                  :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
            <el-table-column fixed type="selection" width="55"/>
            <#list columns as column>
                <el-table-column prop="${column.camel_case_column_name}" label="${column.column_comment}"
                                 show-overflow-tooltip/>
            </#list>

            <el-table-column fixed="right" label="操作" width="300" show-overflow-tooltip>
                <template #header>
                    <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>
                </template>
                <template #default="scope">
                    <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除</el-button>
                    <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                       :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </el-card>

    <!-- 新增或者修改页面-->
    <${entityName}AddOrEdit
            @closeEditDialog="closeEditDialog"
            :addOrEditVisible="addOrEditVisible"
            :ruleForm="ruleForm"
            :addDataType="addDataType"></${entityName}AddOrEdit>
</template>

<script lang="ts" setup>
    import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
    import {onMounted, computed, reactive, ref} from 'vue'
    import {Params, Result} from "@/apis/model/common/common.interfaces"
    import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
    import ${entityName}AddOrEdit from './${lowerEntityName}AddOrEdit.vue'
    import <#noparse>{</#noparse>${entityName}<#noparse>}</#noparse>
        from "@/apis/model/${lastPackageName}/${entityName}Model";
    import {delete${entityName}ById, ${lowerEntityName}Page} from "@/apis/http/${lastPackageName}/${entityName}Http";

    // 查询
    const params${r': Params'} = reactive({
        current: 1,
        size: 10,
        search: '',
        entity: <#noparse>{} </#noparse>
        <#noparse>
    })
    </#noparse>

    const ruleForm = ref < ${entityName} > (<#noparse>{} </#noparse> as ${entityName} )

    // AddOrEditVisible
    const addOrEditVisible = ref(false)

    // table 表数据
    ${r' const tableData: any =  ref({}); '}

    // 加载数据
    const loading = ref(true)
    const addDataType = ref('add');

    /**
     * 初始化数据
     */
    const initList = () => {
        loading.value = true
        ${lowerEntityName}Page(params).then((res: Result) => {
            const code = res.code
            const message = res.message
            const data = res.data
            if (code == 200) {
                tableData.value = data
            }
            loading.value = false
        })
    }

    /**
     * search 查询数据
     */
    const searchData = () => {
        initList()
    }

    /**
     * 每页数据量改变查询数据
     * @param val
     */
    const handleSizeChange = ${r' (val: number) => { '}
    params.size = val
    initList()
    ${r' } '}

    /**
     * 分页查询数据
     * @param val
     */
    const handleCurrentChange = ${r' (val: number) => {'}
    params.current = val
    initList()
    ${r' } '}

    /**
     * 添加弹出
     */
    const addDialog = () => {
        addOrEditVisible.value = true
        ruleForm.value = <#noparse> {}  </#noparse>  as  ${entityName}
        addDataType.value = 'add'
    }

    //修改弹窗
    const editDialog = ${r'(row:'}
    ${entityName}
    ${r') =>{'}
    addOrEditVisible.value = true
    ruleForm.value = row
    addDataType.value = 'edit'
    ${r'}'}

    // 关闭修改弹窗
    const closeEditDialog = ${r' (e: any) => { '}
    addOrEditVisible.value = e.addOrEditVisible
    if (e.refushList = true) {
        params.current = 1;
        initList();
        ${r'  } '}
    }

    /**
     * 弹出删除对话框
     */
    const showDeleteDialog = ${r' (id: number) => { '}
    ElMessageBox.confirm(
        '是否删除?',
        '提醒',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        delete${entityName}ById(id).then((res: Result) => {
            const code = res.code;
            if (code == 200) {
                ElMessage({
                    message: '删除数据成功！',
                    type: 'success',
                })
                initList();
            } else {
                ElMessage.error('删除数据失败！');
            }
        })
    }).catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
    })
    ${r' } '}

    onMounted(() => {
        initList()
    })
</script>

<style>
</style>
